import Vue from 'vue'
import Vuex, { mapGetters } from 'vuex'

Vue.use(Vuex)
import { seedData } from '@/components/seedData'
import { CalendarDetail, Event } from '@/components/calendarDetail'
export default new Vuex.Store({
    state: {
        members: [1, 2, 3],
        seedData
    },
    mutations: {
        pushNewNumber(state,newNumberString){
            state.members.push(Number(newNumberString));
        },
        setActiveDay(state,dayId:number){
            state.seedData.map((dayObj) =>{
                dayObj.id == dayId ? dayObj.active = true : dayObj.active = false;
            })
        },
        submitEvent(state:any,{dayId,eventDetail}){
            const dayItem = state.seedData.find((item:CalendarDetail) =>{
                return item.id === dayId
            });
            console.log(dayItem);
            const eventObj = {
                "details":eventDetail,
                "edit":false
            };
            dayItem.events.push(eventObj);
        },
        editEvent(state,{dayId,eventDetails}){
            const dayObj = state.seedData.find(day => day.id == dayId);
            const eventObj = (dayObj as any).events.find((event:any) => event.details == eventDetails);
            eventObj.edit = true;
        },
        resetEditOfAllEvents(state){
            state.seedData.map((dayObj) =>{
                dayObj.events.map((event) =>{
                    event.edit = false;
                })
            })
        },
        updateEvents(state,{dayId,originalEventDetails,newEventDetails}){
            const dayObj = state.seedData.find(day => day.id == dayId);
            const eventObj = (dayObj as any).events.find((event:any) => event.details == originalEventDetails);
            eventObj.details = newEventDetails;
            eventObj.edit = false;
        },
        removeEvent(state,{dayId,eventDetails}){
            const dayObj = state.seedData.find(day => day.id == dayId);
            const eventIndexToRemove = (dayObj as any).events.findIndex((event:any) => event.details === eventDetails);
            (dayObj as any).events.splice(eventIndexToRemove,1);
        }
    },
    actions: {},
    modules: {},
    getters:{
        getActiveDay(state):CalendarDetail{
            return state.seedData.find((day) => day.active) as CalendarDetail;
        },
    }
})
